<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head th:replace="common::head"></head>
<body>
<div th:replace="common::top"></div>
<br/>
<h2>修改密码</h2>
<form th:action="@{changePassword}" method="post" id="passForm">
    <label>原密码: </label>
    <input type="password" name="old" required>
    <br/>
    <label>新密码: </label>
    <input type="password" name="password" required>
    <br/>
    <label>确认码: </label>
    <input type="password" name="confirm" required oninput="check(this)">
    <br/>
    <label id="message"></label>
    <br/>
    <input type="button" value="取消" onclick="javascript:window.location.href='../index.html'">
    <input type="submit" value="更新">
</form>
<script>
    $("#passForm").submit(function(e){
        e.preventDefault();

        $.ajax({
            type: $("#passForm").attr("method"),
            url: $("#passForm").attr("action"),
            data: $("#passForm").serialize(),
            success: function(response){
                alert("提交成功");
                window.location.href="list.html";
            },
            error: function(response){
                alert("提交失败");
            }
        });
    });

    function check(input) {
        if(input.value != document.getElementsByName('password')[0].value) {
            document.getElementById('message').style.color = 'red';
            document.getElementById('message').innerHTML = '两次密码输入不一致!';
            return false;
        } else {
            document.getElementById('message').style.color = 'green';
            document.getElementById('message').innerHTML = '密码输入正确!';
        return true;
        }
    }
</script>
</body>
</html>